<template>
  <qf-table
    :columns="columns"
    :tableData="tableData"
    align="center"
    :tableLoading="tableLoading"
  >
    <template v-slot:imageUrl="{ row }">
      <!-- <el-avatar shape="square" :src="row.imageUrl"></el-avatar> -->
      <img :src="row.imageUrl" width="100" />
    </template>
    <template v-slot:action="{ row }">
      <el-button type="success">
        <!-- 自定义图标 -->
        <template #icon>
          <i class="iconfont icon-vip3"></i>
        </template>
        <!-- 自定义语法 -->
        <template #default>点击充值</template>
      </el-button>
    </template>
  </qf-table>
</template>
<script setup>
import qfTable from "@/components/qfTable/index.vue";
import * as api from "@/api/pay";
import { ref, onMounted } from "vue";

//定义表头
let columns = [
  {
    label: "产品图片",
    prop: "imageUrl",
  },
  {
    label: "产品名称",
    prop: "productName",
  },
  {
    label: "产品描述",
    prop: "description",
  },
  {
    label: "产品价格",
    prop: "price",
  },
  {
    label: "库存",
    prop: "inventory",
  },
  {
    label: "充值",
    prop: "action",
  },
];
//声明一个数组，用于注入表格
let tableData = ref([]);
//声明控制加载动画的变量
let tableLoading = ref(false);

//获取产品
let getList = async () => {
  tableLoading.value = true;
  try {
    let res = await api.getCategoryApi();
    // console.log(res);
    tableData.value = res.data.data.reverse();
    tableLoading.value = false;
    // console.log(tableData.value);
  } catch (e) {
    console.log(e);
    tableLoading.value = false;
  }
};
onMounted(() => {
  getList();
});
</script>
<script>
export default {
  meta: {
    title: "vipCharge",
    name: "vip充值",
    routeName: "charge",
    icon: "icon-chongzhi",
  },
};
</script>
<style scoped>
.el-table {
  margin-top: 30px;
}
</style>
